<template>
    <div class="app-container">
        <div class="filter-container">
            <el-form>
                <el-form-item label="时间区间">
                    <el-date-picker
                        v-model="dateValue"
                        type="daterange"
                        align="right"
                        unlink-panels
                        range-separator="至"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期"
                        :picker-options="pickerOptions2"
                        format="yyyy-MM-dd"
                        value-format="yyyy-MM-dd">
                    </el-date-picker>
                    &nbsp;
                    <el-button type="danger" @click="drawCharts">绘制</el-button>
                </el-form-item>
            </el-form>
        </div>

        <el-card>
            <el-row :gutter="10">
                <el-col :span="8">
                    <div id="top10ProfitChart" style="width: 600px;height:400px;"></div>
                </el-col>
                <el-col :span="8">
                    <div id="top10SellChart" style="width: 600px;height:400px;"></div>
                </el-col>
                <el-col :span="8">
                    <div id="top10NotPopularChart" style="width: 600px;height:400px;"></div>
                </el-col>
            </el-row>
        </el-card>

        <el-card>
            <el-row :gutter="20">
                <el-col :span="8">
                    <div id="totalCustomerChart" style="width: 600px;height:400px;"></div>
                </el-col>
                <el-col :span="8">
                    <div id="avgCostChart" style="width: 600px;height:400px;"></div>
                </el-col>
                <el-col :span="8">
                    <div id="totalIncomeChart" style="width: 600px;height:400px;"></div>
                </el-col>
            </el-row>
        </el-card>

        <el-card>
            
            <el-select v-model="foodValue" placeholder="选择菜品类型">
                <el-option
                    v-for="item in foodOption"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                </el-option>
            </el-select>

            <el-row :gutter="20">
                <el-col :span="8">
                    <div id="sellNumChart" style="width: 600px;height:400px;"></div>
                </el-col>
                <el-col :span="8">
                    <div id="profitChart" style="width: 600px;height:400px;"></div>
                </el-col>
            </el-row>
        </el-card>

        
    </div>
</template>

<script>
export default {
    mounted() {
        this.getCharData()
    },
    data() {
        return {
            result: {
                outline: {
                    consumerCount: 1000,
                    avgCost: 233.33,
                    totalIncome: 250000
                },
                items: [
                    {
                        sellNums: 20,
                        profit: 300.0
                    }
                ]
            },
            pickerOptions2: {
                shortcuts: [{
                    text: '最近一周',
                    onClick(picker) {
                    const end = new Date();
                    const start = new Date();
                    start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                    picker.$emit('pick', [start, end]);
                    }
                }, {
                    text: '最近一个月',
                    onClick(picker) {
                    const end = new Date();
                    const start = new Date();
                    start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                    picker.$emit('pick', [start, end]);
                    }
                }, {
                    text: '最近三个月',
                    onClick(picker) {
                    const end = new Date();
                    const start = new Date();
                    start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                    picker.$emit('pick', [start, end]);
                    }
                }]
            },
            chartShow:false,
            dateValue: [
                
            ],
            foodOption: [
                {
                    value: '1',
                    label: '头盘'
                }, 
                {
                    value: '2',
                    label: '汤'
                }, 
                {
                    value: '3',
                    label: '主菜'
                }, 
                {
                    value: '4',
                    label: '甜品'
                }, 
                {
                    value: '5',
                    label: '饮品'
                }
            ],
            foodValue: 1,
            totalCustomerOption: {
                title : {
                    text: '消费人数',
                    // subtext: '纯属虚构',
                    x:'center'
                },
                tooltip : {
                    formatter: "{a} <br/>{b} : {c}"
                },
                toolbox: {
                    feature: {
                        restore: {},
                        saveAsImage: {}
                    }
                },
                series: [
                    {
                        name: '消费人数',
                        type: 'gauge',
                        min: 0,
                        max: 3000,
                        detail: {formatter:'{value}'},
                        data: [{value: 1550, name: '消费人数'}]
                    }
                ]
            },
            avgCostOption: {
                title : {
                    text: '人均消费',
                    // subtext: '纯属虚构',
                    x:'center'
                },
                tooltip : {
                    formatter: "{a} <br/>{b} : {c}"
                },
                toolbox: {
                    feature: {
                        restore: {},
                        saveAsImage: {}
                    }
                },
                series: [
                    {
                        name: '人均消费',
                        type: 'gauge',
                        min: 0,
                        max: 500,
                        detail: {formatter:'{value}'},
                        data: [{value: 233.33, name: '人均消费'}]
                    }
                ]
            },
            totalIncomeOption: {
                title : {
                    text: '总营业额',
                    // subtext: '纯属虚构',
                    x:'center'
                },
                tooltip : {
                    formatter: "{a} <br/>{b} : {c}"
                },
                toolbox: {
                    feature: {
                        restore: {},
                        saveAsImage: {}
                    }
                },
                series: [
                    {
                        name: '总营业额',
                        type: 'gauge',
                        min: 0,
                        max: 1000000,
                        detail: {formatter:'{value}'},
                        data: [{value: 564321, name: '总营业额'}]
                    }
                ]
            },
            sellNumOption: {
                title : {
                    text: '销售数量',
                    // subtext: '纯属虚构',
                    x:'center'
                },
                tooltip : {
                    formatter: "{a} <br/>{b} : {c}"
                },
                toolbox: {
                    feature: {
                        restore: {},
                        saveAsImage: {}
                    }
                },
                series: [
                    {
                        name: '销售数量',
                        type: 'gauge',
                        min: 0,
                        max: 3000,
                        detail: {formatter:'{value}'},
                        data: [{value: 1550, name: '销售数量'}]
                    }
                ]
            },
            profitOption: {
                title : {
                    text: '利润',
                    // subtext: '纯属虚构',
                    x:'center'
                },
                tooltip : {
                    formatter: "{a} <br/>{b} : {c}"
                },
                toolbox: {
                    feature: {
                        restore: {},
                        saveAsImage: {}
                    }
                },
                series: [
                    {
                        name: '利润',
                        type: 'gauge',
                        min: 0,
                        max: 100000,
                        detail: {formatter:'{value}'},
                        data: [{value: 66666, name: '利润'}]
                    }
                ]
            },
            top10ProfitOption: {
                title : {
                    text: '销售利润前十位及其所占比例',
                    // subtext: '纯属虚构',
                    x:'center'
                },
                tooltip : {
                    trigger: 'item',
                    formatter: "{a} <br/>{b} : {c} ({d}%)"
                },
                legend: {
                    orient: 'vertical',
                    left: 'left',
                    data: ['菜品1','菜品2','菜品3','菜品4','菜品5','菜品6', '菜品7', '菜品8', '菜品9', '菜品10', '其他']
                },
                series : [
                    {
                        name: '利润占比',
                        type: 'pie',
                        radius : '55%',
                        center: ['50%', '60%'],
                        data:[
                            {value:335, name:'菜品1'},
                            {value:310, name:'菜品2'},
                            {value:234, name:'菜品3'},
                            {value:135, name:'菜品4'},
                            {value:548, name:'菜品5'},
                            {value:748, name:'菜品6'},
                            {value:348, name:'菜品7'},
                            {value:438, name:'菜品8'},
                            {value:548, name:'菜品9'},
                            {value:481, name:'菜品10'},
                            {value:584, name:'其他'}
                        ],
                        itemStyle: {
                            emphasis: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                    }
                ]
            },
            top10SellOption: {
                title : {
                    text: '销售数量前10的菜品',
                    // subtext: '纯属虚构',
                    x:'center'
                },
                tooltip : {
                    trigger: 'item',
                    formatter: "{a} <br/>{b} : {c} ({d}%)"
                },
                legend: {
                    orient: 'vertical',
                    left: 'left',
                    data: ['菜品1','菜品2','菜品3','菜品4','菜品5','菜品6', '菜品7', '菜品8', '菜品9', '菜品10']
                },
                series : [
                    {
                        name: '销售数量',
                        type: 'pie',
                        radius : '55%',
                        center: ['50%', '60%'],
                        data:[
                            {value:335, name:'菜品1'},
                            {value:310, name:'菜品2'},
                            {value:234, name:'菜品3'},
                            {value:135, name:'菜品4'},
                            {value:548, name:'菜品5'},
                            {value:748, name:'菜品6'},
                            {value:348, name:'菜品7'},
                            {value:438, name:'菜品8'},
                            {value:548, name:'菜品9'},
                            {value:481, name:'菜品10'}
                        ],
                        itemStyle: {
                            emphasis: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                    }
                ]
            },
            top10NotPopularOption: {
                title: {
                    text: '最不受欢迎的前十位',
                    x: 'center'
                },
                tooltip : {
                    trigger: 'item',
                    formatter: "{a} <br/>{b} : {c} ({d}%)"
                },
                legend: {
                    orient: 'vertical',
                    left: 'left',
                    data: ['菜品1','菜品2','菜品3','菜品4','菜品5','菜品6', '菜品7', '菜品8', '菜品9', '菜品10', '其他']
                },
                series : [
                    {
                        name: '利润占比',
                        type: 'pie',
                        radius : '55%',
                        center: ['50%', '60%'],
                        data:[
                            {value:335, name:'菜品1'},
                            {value:310, name:'菜品2'},
                            {value:234, name:'菜品3'},
                            {value:135, name:'菜品4'},
                            {value:548, name:'菜品5'},
                            {value:748, name:'菜品6'},
                            {value:348, name:'菜品7'},
                            {value:438, name:'菜品8'},
                            {value:548, name:'菜品9'},
                            {value:481, name:'菜品10'},
                            {value:584, name:'其他'}
                        ],
                        itemStyle: {
                            emphasis: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                    }
                ]
            },
            mostPeopleTimeOption: {
                title: {
                    text: '用餐人数-时间段',
                    x: 'center'
                },
                 xAxis: {
                    type: 'category',
                    data: ['9', '10', '11', '12', '13', '14', '15','16','17','18','19','20','21','22','23','24']
                },
                yAxis: {
                    type: 'value'
                },
                series: [{
                    data: [5, 8, 20, 35, 30, 15, 10, 18, 30, 40, 50, 39, 30,10,3,0],
                    type: 'line',
                    smooth: true
                }]
            },
            mostPeopleDateOption: {
                title: {
                    text: '用餐人数-日期',
                    x: 'center'
                },
                 xAxis: {
                    type: 'category',
                    data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
                },
                yAxis: {
                    type: 'value'
                },
                series: [{
                    data: [220, 332, 301, 334, 690, 730, 720],
                    type: 'line',
                    smooth: true
                }]
            },
        }
    },
    mounted() {
        // this.drawCharts()
    },
    methods: {
        async drawCharts() {
            const data = {
                dateValue: this.dateValue,
                tid: this.foodValue
            }
            const res = await this.$api.chart.getCharts(data)

            this.totalCustomerOption.series[0].data[0].value = res.data.totalInfo.cost_num
            this.avgCostOption.series[0].data[0].value = res.data.totalInfo.avg_cost
            this.totalIncomeOption.series[0].data[0].value = res.data.totalInfo.total_income

            this.top10ProfitOption.legend.data = res.data.top10Income.legend
            this.top10ProfitOption.series[0].data = res.data.top10Income.series

            this.top10SellOption.legend.data = res.data.top10Pop.legend
            this.top10SellOption.series[0].data = res.data.top10Pop.series

            this.top10NotPopularOption.legend.data = res.data.top10UnPop.legend
            this.top10NotPopularOption.series[0].data = res.data.top10UnPop.series

            this.sellNumOption.series[0].data[0].value = res.data.foodType.total_count
            this.profitOption.series[0].data[0].value = res.data.foodType.total_income

            var totalCustomerChart = this.$echarts.init(document.getElementById('totalCustomerChart'))
            totalCustomerChart.setOption(this.totalCustomerOption)

            var avgCostChart = this.$echarts.init(document.getElementById('avgCostChart'))
            avgCostChart.setOption(this.avgCostOption)

            var totalIncomeChart = this.$echarts.init(document.getElementById('totalIncomeChart'))
            totalIncomeChart.setOption(this.totalIncomeOption)

            var sellNumChart = this.$echarts.init(document.getElementById('sellNumChart'))
            sellNumChart.setOption(this.sellNumOption)

            var profitChart = this.$echarts.init(document.getElementById('profitChart'))
            profitChart.setOption(this.profitOption)

            var top10ProfitChart = this.$echarts.init(document.getElementById('top10ProfitChart'))
            top10ProfitChart.setOption(this.top10ProfitOption)

            var top10SellChart = this.$echarts.init(document.getElementById('top10SellChart'))
            top10SellChart.setOption(this.top10SellOption)

            var top10NotPopularChart = this.$echarts.init(document.getElementById('top10NotPopularChart'))
            top10NotPopularChart.setOption(this.top10NotPopularOption)

        }
    }
}
</script>

